<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa" to="/home">
                    <i class="el-icon-arrow-left  f40  cfff"></i>
                </router-link>
                    专业洗车
            </h1>
        </header>
        <nav class="nav mb20">
            <div class=" mb65 search wrap pr">
                <input class="search bcfff w100 f25" placeholder="输入需要搜索的内容" type="text" v-model="content">
                <a href="#" @click="onSearch">
                    <img class="pa" src="../../../assets/img/wash-car-img/search.png">
                </a>
            </div>
           <div class="histoy ml40 mr40 lh40" >
                <div class="cfff f20 fn ">
                    <span class="f30 mr30">历史记录:</span>
                    <span v-for=" el in historyArr" class="mr30 ">{{ el }}</span>
                </div>
           </div>
        </nav>
        <main class="p20 c333">
            <section class="main-station bcfff mb20 f25" v-for="item in arr">
                <router-link :to="{
                    name:'washCar',
                    params:{id:item.id}
                    }">
                    <div class="wrap flex jcsb aic  mb20">
                        <div>
                            <h1 class="f30 fn c000">{{ item.name }}</h1>
                        </div>
                        <!-- <div class="f25 c007">{{ item.distance }}</div> -->
                        <div class="f25 c007">556m</div>
                    </div>
                    <div class="wrap flex mb30 f16">
                        <div class="mr20">
                            <el-rate v-model="item.star" disabled score-template="{item.star}" style="display:inline-block;">
                            </el-rate>
                            <span class="f25">{{ item.star }}分</span>
                        </div>
                        <div class="f25">
                            <!-- 销量：<span>{{ item.Num }}</span> -->
                            销量：<span>999</span>
                        </div>
                    </div>
                    <div class="wrap flex">
                        <img class="store-img mr30" :src="item.licensePicture">
                        <div class="mt15">
                            <!-- <p class="mb15">营业时间：{{ item.date }}</p> -->
                            <p class="mb15">营业时间：周一至周五</p>
                            <!-- <p class="mb15">{{ item.time }}</p> -->
                            <p class="mb15">09:00-22:00</p>
                            <p class="mb15">{{ item.location }}</p>
                        </div>
                    </div>
                </router-link>
            </section>
        </main>
    </div>
</template>
<script>
import { washStoreList } from '../../../api/wash';
import { storeList } from '../../../api/wash';
export default {
    mounted(){
        this.init();
    },
    data(){
        return{
            content:"",
            historyArr:[],
            arr:[]
        }
    },
    methods:{
        onSearch(){
            if(this.content){
                storeList().then(r=>{
                    let res = r.data;
                    console.log(res);
                    let dataArr = res.filter((item,value,res)=>{
                        if(item.name){
                            // console.log(item.name.indexOf(this.content));
                            if(item.name.indexOf(this.content)>=0){
                                return  item;
                            }
                        }
                    })
                    this.arr = dataArr;
                    //当前搜索结果不为空则存入history
                    // console.log(this.content);
                    if(dataArr){
                        this.historyArr.push(this.content);
                    }
                    sessionStorage.setItem("historyArr",this.historyArr);
                })
            }else{
                this.init();
            }
        },
        init(){//初始化页面
            washStoreList({
                categoryId: 2
            }).then(r=>{
                this.arr = r.data;
            })
        }
    }
}
</script>
<style scoped>
>>>.el-rate__icon{font-size: 35rem;}
a{color: #333;}
.lh40{line-height: 40rem;}
.vm{vertical-align: middle;}
.c000{color:#000}
.c333{color: #333;}
.c007{color:#0071fd}
input:focus {
    outline: 1px solid #3385fd;
}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

.nav{margin-top: -330rem;}
.nav .search{height: 80rem;border-radius: 40rem;line-height: 80rem;padding: 25rem 40rem;box-sizing: border-box; border: none;}
.nav .search img{width: 30rem;height: auto; top: 50%;right: 80rem;transform:translateY(50%);}

main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
main section img.store-img {width: 205rem;height: 140rem;} 

</style>